<div class="team-header">
    <div class="row align-items-center">
        <div class="col">
            <h3>{{ team.name }}</h3>
        </div>

        <div class="col-auto">
            <a class="link" [routerLink]="['/app/teams', team.id]" sqxStopClick>{{ "common.edit" | sqxTranslate }}</a>
        </div>

        <div class="col-auto">
            <button
                class="btn btn-sm btn-text-secondary"
                #buttonOptions
                attr.aria-label="{{ 'common.options' | sqxTranslate }}"
                (click)="dropdown.toggle()"
                sqxStopClick
                type="button">
                <i class="icon-dots"></i>
            </button>
            <sqx-dropdown-menu scrollY="true" [sqxAnchoredTo]="buttonOptions" *sqxModal="dropdown; closeAlways: true">
                <a
                    class="dropdown-item dropdown-item-delete"
                    confirmRememberKey="leaveApp"
                    confirmText="i18n:teams.leaveConfirmText"
                    confirmTitle="i18n:teams.leaveConfirmTitle"
                    (sqxConfirmClick)="leave.emit(team)">
                    {{ "teams.leave" | sqxTranslate }}
                </a>
            </sqx-dropdown-menu>
        </div>
    </div>
</div>
